<template>
	<view class="replace">
		<navBar title="修改个人信息"></navBar>
		<view class="text">
			<view class="form">
				<u--form labelWidth="80" labelPosition="left" :model="form" ref="form" :labelStyle="{paddingLeft: '5px'}" :rules="rules">
					<!-- 头像 -->
					<u-form-item prop="avatar" label="头像" borderBottom required>
						<u-upload maxCount="1" :previewFullImage="true":fileList="fileList" @delete="deletePic" @afterRead="afterRead"></u-upload>
					</u-form-item>
					<!-- 昵称 -->
					<u-form-item prop="name" label="昵称" borderBottom required>
						<u--input v-model="form.name"></u--input>
					</u-form-item>
					<!-- 个性签名 -->
					<u-form-item prop="desc" label="个性签名" borderBottom required>
						<u--input v-model="form.desc"></u--input>
					</u-form-item>
				</u--form>
			</view>
			<view class="buttom">
				<view class="btn">
					<u-button text="确定" color="#fe630a" @click="confirm"></u-button>
				</view>
				<view class="btn">
				<u-button text="取消" color="#fe630a" :plain="true" @click="back"></u-button>
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
	import {
		mapState,mapMutations
	} from 'vuex'

	import {
		edit,
		check
	} from '@/config/api.js'
	
	export default {
		data() {
			return {
				fileList:[],
				form:{
					    name:"",
					    avatar:"",
					    desc:"",
					    projectId:165
				},
				rules:{
					name: {
						required: true,
						message: "请输入昵称",
						trigger: ['change', 'blur']
					},
					desc: {
						required: true,
						message: "请输入内容",
						trigger: ['change', 'blur']
					},
					avatar: {
						required: true,
						message: "请上传图片",
						trigger: ['change', 'blur']
					}
				}
			};
		},
		onLoad() {
			this.fileList=[{url: this.userInfo.avatar}]
			this.form={
				avatar:this.userInfo.avatar,
				name:this.userInfo.name,
				desc:this.userInfo.desc,
				projectId:165
			}
		},
		methods:{
			...mapMutations(['changeUserInfo']),
			// 删除初始头像
			deletePic(){
				this.fileList.splice(0, 1)
			},
			// 上传新的头像
			afterRead(data){
				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}
				this.fileList.push(imgStatus)
				
				// 通过此接口将本地资源上传到指定服务器
				uni.uploadFile({
					url: "https://eggblog.bluej.cn/api/imgUpload",
					filePath: data.file.url,
					name: "file",
					header: {
						"x-token": this.userInfo.token
					},
					success: res => {
						console.log(JSON.parse(res.data));
						const fileData = JSON.parse(res.data)
				
						this.$set(this.fileList, 0, {
							status: 'success',
							url: fileData.data[0]
						})
						
						// 保存在form表单内
						this.form.avatar=fileData.data[0]
					}
				})
			},
			async confirm(){
			try{
				await this.$refs.form.validate()

				// 请求编辑个人信息接口
				const formList=await edit(this.form,this.userInfo.token)
				console.log(formList);
				
				this.changeUserInfo(this.form)	
				
				uni.showToast({
					title:'修改成功'
				})
				setTimeout(()=>{
					uni.switchTab({
					url:'/pages/mine/mine'
					})
				},1000)
				
				// 请求查看个人信息接口
				// const user=await check(this.form,this.userInfo.token)
				}catch(e){
					uni.showToast({
						icon: "error",
						title:"修改失败"
					}),
					setTimeout(()=>{
						this.$refs.form.clearValidate()
					},2000)
				}
			},
			back(){
				uni.switchTab({
						url:'/pages/mine/mine'
				})
			}
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
.replace{
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	padding:4vw;
	background-color: #eee;
	.text{
		padding: 5vw;
		font-size: 10px;
		box-sizing: border-box;
		width: 100%;
		height: 88vw;
		background-color: #fff;
		border-radius: 3vw;
		display: flex;
		flex-direction: column;
		.buttom{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 7vw;
			.btn{
				width: 47%;
			}
		}
	}
}
</style>
